<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="./framework/font-awesome-4.7.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="./framework/reset.css">
		<link rel="stylesheet" href="./framework/common.css">
		<link rel="stylesheet" href="./css/feedbackList.css">
		<title>东软环保公众监督系统-网格员端</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<!-- 总容器 -->
		<div class="wrapper">
			<div class="header-box">
				<header>
					<i class="fa fa-angle-left" onclick="history.go(-1)"></i>
					<p>反馈任务列表</p>
					<i></i>
				</header>
				<div class="top-ban"></div>
				<img src="./img/header.png" onclick="reflash();">
			</div>

			<ul id="feedbacks">
				<!-- 				<li>
					<div class="left">
						<div class="icon" style="background-color: ;">四</div>
						<div class="info">
							<p>辽宁省 沈阳市 2022-10-25</p>
							<p>大东区盐泉路123号</p>
						</div>
					</div>
					<div class="right" onclick="location.href='feedbackInfo.html'">
						<p>去检测</p>
						<i class="fa fa-hand-o-right"></i>
					</div>
				</li> -->
			</ul>
			<div id="nextPage" style="text-align: center;color: #333; background-color: aquamarine;font-size: 18px;"
				onclick="loadData();">
				点击加载更多</div>

			<footer style="z-index: -1;">
				<img src="./img/bottom.png">
			</footer>
		</div>
	</body>
</html>
<script>
	let lastAfId = -1;
	let token = localStorage.getItem("token");
	// 创建请求配置对象
	const config = {
		headers: {
			'token': token, // 设置认证令牌
			'Content-Type': 'application/json' // 设置内容类型为JSON
		}
	};

	function loadData() {
		let pageSize = 5;
		let url = "http://localhost:8080/aqi/gmPage?pageSize=" + pageSize + "&lastAfId=" + lastAfId;
		axios.get(url, config).then((r) => {
			if (r.data.ok) {
				let arr = r.data.data.list;
				lastAfId = arr[arr.length - 1].id;
				let innerHTML = document.getElementById("feedbacks").innerHTML;
				for (var i = 0; i < arr.length; i++) {
					let feedback = arr[i];
					innerHTML = innerHTML + " <li>\n" +
						"  <div class=\"left\">\n" +
						"   <div class=\"icon\" style=\"background-color:" + feedback.color + "\">" + feedback
						.chineseExplain + "</div>\n" +
						"   <div class=\"info\">\n" +
						"    <p>" + feedback.provinceName + " " + feedback.cityName +
						" " + feedback.afDate + "</p>\n" +
						"    <p>" + feedback.address + "</p>\n" +
						"   </div>\n" +
						"  </div>\n" +
						"  <div class=\"right\" onclick=\"\">\n" +
						"   <p onclick=\"goTo(" + feedback.id + ");\">去检测</p>\n" +
						"  <i class=\"fa fa-hand-o-right\"></i>\n" +
						"  </div>\n" +
						" </li>"
				}
				document.getElementById("feedbacks").innerHTML = innerHTML;
			} else {
				let feedbacks = r.data.data.list;
				if (feedbacks.length == 0) {
					document.getElementById("nextPage").innerHTML = "我是有底线的";
					return;
				}
			}
		})
	}
	loadData();

	function nextPage() {
		loadData();
	}

	function reflash() {
		document.getElementById("feedbacks").innerHTML = "";
		lastAfId = -1;
		loadData();
		document.getElementById("nextPage").innerHTML = "点击加载更多";
	}

	function goTo(id) {
		localStorage.setItem("afId", id);
		location.href = 'feedbackInfo.html'
	}
</script>